<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>WebWolf</title>
    <div th:replace="fragments/header :: header-css"/>
</head>
<body>

<div th:replace="fragments/header :: header"/>

<script type="text/javascript" th:src="@{/js/mail.js}"></script>

<div class="container">


    <div class="alert alert-info fade in">

        <a href="#" class="close" data-dismiss="alert">&times;</a>
        <p>
            The mailbox of you as an attacker, all the mail send to {user}@{random} will be send to this mailbox.
        </p>
        <p>
            Only the user part is important the domain can be anything
        </p>
    </div>

    <div class="panel panel-default">
        <div class="panel-body">
            <div class="row">
                <div class="col-sm-3 col-md-2">
                    <div class="btn-group">
                        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                            Mail <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Mail</a></li>
                            <li><a href="#">Contacts</a></li>
                            <li><a href="#">Tasks</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-9 col-md-10">
                    <button type="button" class="btn btn-default" data-toggle="tooltip" title="Refresh" onclick="refreshEmails()">
                           <span class="glyphicon glyphicon-refresh"></span>   
                    </button>
                    <!-- Single button -->
                    <div class="btn-group">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            More <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Mark all as read</a></li>
                            <li class="divider"></li>
                            <li class="text-center">
                                <small class="text-muted">Select messages to see more actions</small>
                            </li>
                        </ul>
                    </div>
                    <div class="pull-right">
                        <span class="text-muted"><b>1</b>–<b><span th:text="${total}"> 50</span> </b> of <b><span th:utext="${total}"></span></b></span>
                        <div class="btn-group btn-group-sm">
                            <button type="button" class="btn btn-default">
                                <span class="glyphicon glyphicon-chevron-left"></span>
                            </button>
                            <button type="button" class="btn btn-default">
                                <span class="glyphicon glyphicon-chevron-right"></span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <hr/>
            <div class="row">
                <div class="col-sm-3 col-md-2">
                    <a href="#" class="btn btn-danger btn-sm btn-block" role="button">COMPOSE</a>
                    <hr/>
                    <ul class="nav nav-pills nav-stacked">
                        <li class="active"><a href="#"><span class="badge pull-right" th:utext="${total}">42</span>
                            Inbox </a>
                        </li>
                    </ul>
                </div>
                <div class="col-sm-9 col-md-10">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#home" data-toggle="tab"><span class="glyphicon glyphicon-inbox">
                </span>Primary</a></li>
                        <li><a href="#profile" data-toggle="tab"><span class="glyphicon glyphicon-user"></span>
                            Social</a></li>
                        <li><a href="#messages" data-toggle="tab"><span class="glyphicon glyphicon-tags"></span>
                            Promotions</a></li>
                        <li><a href="#settings" data-toggle="tab"><span class="glyphicon glyphicon-plus no-margin">
                </span></a></li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="home">
                            <span th:each="mail : ${emails}" class="list-group">
                                <a href="#" class="showMail list-group-item">


                                    <span class="glyphicon glyphicon-star-empty"></span>
                                    <span class="name"
                                          style="min-width: 120px; display: inline-block;"
                                          th:text="${mail.shortSender}">WebGoat</span>
                                    <span class="" th:text="${mail.title}">Title</span>
                                    <span class="text-muted" style="font-size: 11px;" th:text="${mail.summary}">- summary</span>
                                    <span class="badge" th:text="${mail.time}">12:10 AM</span>
                                    <span class="pull-right">
                                        <span class="glyphicon glyphicon-paperclip"></span>
                                    </span>
                                </a>
                                    <!---->
                                    <div class="left15 contents panel panel-default top10" style="display:none" >
                                        <div class="panel-heading" >
                                            <b><span th:text="${mail.title}"></span></b>
                                            <b><span class="pull-right" th:text="${mail.sender}"></span></b>
                                        </div>
                                         <div class="panel-body">
                                            <pre th:utext="${mail.contents}"/>
                                         </div>
                                    </div>

                            </span>

                        </div>
                        <div class="tab-pane fade in" id="profile">
                            <div class="list-group">
                                <div class="list-group-item">
                                    <span class="text-center">This tab is empty.</span>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade in" id="messages">
                            <div class="list-group-item">
                                <span class="text-center">Why the name "WebGoat"? Developers should not feel bad about not knowing security. Even the best programmers make security errors. What they need is a scapegoat, right? Just blame it on the 'Goat!</span>
                            </div>
                        </div>
                        <div class="tab-pane fade in" id="settings">
                            This tab is empty.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
</body>
</html>